<template>
  <button @click="start">开始抽奖</button>
  <button @click="stop">停止</button>
  
  <view class="flex w-360px justify-around flex-wrap">
    <view
      v-for="(item, index) in data"
      :key="item.id"
      class="w-100px h-100px rd-8px flex-xy-center b-1 b-solid-#ccc"
      :class="{ active: activeIndex === index }"
    >
      {{ item.name }}</view
    >
  </view>
  <div class="block">
    <el-avatar :size="50" :src="avatarImg" />
    <span>我的积分：{{userPoint}}</span>
  </div>
  <h2>
    积分兑换优惠券/现金券
  </h2>

  <h3>
    优惠券列表
  </h3>

  <h2>
    积分兑换商品
  </h2>

  <h3>
    商品列表
  </h3>

</template>

<script setup>
import { ref, watch } from "vue";
import { GetUserInfo } from "@/api/user";
import { UserPoint } from "@/api/market";
import router from "@/router";

const userId = ref(0)
const avatarImg = ref('');
const userPoint = ref(0)
const activeIndex = ref(0);
const rotationIndex = ref(0);
const stopIndex = ref(undefined);  // 移除类型注解

const data = ref([
  { name: "一等奖", id: 1 },
  { name: "谢谢参与", id: 2 },
  { name: "二等奖", id: 3 },
  { name: "一等奖", id: 4 },
  { name: "谢谢参与", id: 5 },
  { name: "二等奖", id: 6 },
]);

// 控制选中顺序
const rotationOrder = [1, 3, 5, 4, 2];
let timer;  // 移除类型注解

function start() {
  timer = setInterval(() => {
    if (data.value.length > 0) {
      if (rotationIndex.value < rotationOrder.length) {
        activeIndex.value = rotationOrder[rotationIndex.value];
        rotationIndex.value++;
      } else {
        activeIndex.value = 0;
        rotationIndex.value = 0;
      }
    } else {
      console.error("所有奖项已全部抽完");
    }
  }, 50);
}

function stop() {
  clearInterval(timer);
}

watch(activeIndex, (newValue) => {
  if (newValue === stopIndex.value) {
    stop();
  }
});

setTimeout(() => {
  stopIndex.value = 1;
}, 5000);

GetUserInfo().then(res => {
  userId.value = res.data.data.userId
  avatarImg.value = res.data.data.avatarImg
})

function getUserPoint() {
  UserPoint()
    .then(res => {
      console.info(res)
      console.log(res)
      if (res.data.code == 200000) {
        userPoint.value = res.data.data;
      } else {
        router.push('/user/login');
      }
    })
}

getUserPoint()
</script>


<style scoped>
.active {
  background-color: orange;
}
</style>